<template>
	<view
		style="border-radius: 5px; display: flex; height: 28px; margin-left: 10rpx"
		:style="{
			backgroundColor: disabled ? '#f5f7fa' : border ? '#fff' : 'transparent',
			border: border ? '1px solid #dadada' : 'none'
		}"
	>
		<!-- v-model="internalValue" -->
		<input
			style="flex: 1; margin: 3px 5px"
			:value="internalValue"
			@blur="onBlur($event)"
			@input="onInput($event)"
			:type="type"
			:password="password"
			:disabled="disabled"
			:placeholder="placeholder"
		/>
		<view>
			<slot></slot>
		</view>
	</view>
</template>
<script>
export default {
	name: 'LiInput',
	props: {
		value: {},
		type: {
			type: String,
			default: 'text'
		},
		rule: {
			type: String,
			default: ''
		},
		prop: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		password: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			internalValue: this.value
		};
	},
	watch: {
		value(newVal) {
			this.$nextTick(() => {
				this.internalValue = newVal;
			});
		}
	},
	methods: {
		onInput(event) {
			const rawValue = event.target.value;
			const emojiPattern = /([\u2700-\u27BF]|[\uE000-\uF8FF]|[\uD83C-\uDBFF\uDC00-\uDFFF])+?/gu; // 判断是否非法字符
			// 主动过滤掉 emoji
			if (emojiPattern.test(rawValue)) {
				const filteredValue = rawValue.replace(emojiPattern, '');
				this.internalValue = filteredValue;
			} else {
				this.internalValue = rawValue;
			}
			this.$emit('input', this.internalValue);
		},
		onBlur(event) {
			switch (this.rule) {
				case 'trim':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = this.internalValue.trim();
					}
					break;
				case 'trimEnd':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = this.internalValue.trimEnd();
					}
					break;
				case 'int':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseInt(this.internalValue)) ? 0 : parseInt(this.internalValue);
					}
					break;
				case 'intOrNull':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseInt(this.internalValue)) ? null : parseInt(this.internalValue);
					}
					break;
				case 'intOrEptStr':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseInt(this.internalValue)) ? '' : parseInt(this.internalValue);
					}
					break;
				case 'float':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseFloat(this.internalValue)) ? 0 : parseFloat(this.internalValue);
					}
					break;
				case 'floatOrNull':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseFloat(this.internalValue)) ? null : parseFloat(this.internalValue);
					}
					break;
				case 'floatOrEptStr':
					if (this.internalValue != null && this.internalValue != undefined) {
						this.internalValue = isNaN(parseFloat(this.internalValue)) ? '' : parseFloat(this.internalValue);
					}
					break;

				case 'bool':
					this.internalValue = this.internalValue ? true : false;
					break;
			}

			this.$emit('input', this.internalValue);
			this.$emit('blur', {
				currentTarget: {
					id: this.prop
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.disabled {
	background-color: #f5f7fa;
}
</style>
